<template>
    <div class="qilin-tagsView qilin-pb-2">
        <el-tabs 
            v-model="currentTab"
            type="card" 
            class="tagsView"
            @tab-remove="removeTab"
        >
            <el-tab-pane
                v-for="item in tagsList"
                :key="item.path"
                :name="item.path"
                :closable="item.path !== '/index'"
            >
                <router-link slot="label" :to="item.path"
                    :class="item.path === $route.fullPath ? 'is-active' : '' "
                >{{item.title}}</router-link>
            </el-tab-pane>
        </el-tabs>
        <el-popover
            class="operate"
            placement="bottom"
            trigger="click"
            popper-class="qilin-popover"
        >
            <div class="qilin-tagsView-operate-box">
                <ul class="qilin-tagsView-operate-box-list">
                    <li class="qiln-tagsView-operate-box-list-item"
                        v-for="item in tagsList"
                        :key="item.path"
                        @click="switchToTab(item.path)"
                    >{{item.title}}</li>
                </ul>
                <div class="qilin-tagsView-operate-all" @click="removeOtherTab()">关闭其他页签</div>
                <div class="qilin-tagsView-operate-all" @click="removeAllTab()">关闭所有页签</div>
            </div>
            <i slot="reference" class="el-icon-more"></i>
        </el-popover>
    </div>
</template>
<script>
export default {
    data(){
        return {
            tagsList:[], //路由数组集
            currentTab:"/index" //主要用于在切换至该tab页签时自动校准位置
        }
    },
    watch:{
        $route(newValue){
            // console.log(newValue);
            if (newValue.path === "/login") return;
            this.setRouteTags(newValue);
        }
    },
    methods:{
        // 点击跳转至某个路由页签事件监听
        switchToTab(path){
            if (this.$route.fullPath === path) return;
            this.currentTab=path;
            this.$router.push(path);
        },
        // 点击关闭其他路由页签事件监听
        removeOtherTab(){
            this.tagsList=this.tagsList.filter((item)=>{
                return item.path === this.$route.fullPath;
            });
        },
        // 点击关闭全部路由页签事件监听
        removeAllTab(){
            if(this.$route.fullPath === "/index"){ //如果当前页签在首页,则关闭其他页签留在首页
                this.tagsList=this.tagsList.filter((item)=>{
                    return item.path === this.$route.fullPath;
                });
            }else{ //如果当前页签不在首页，则跳转至首页并关闭其他所有标签页
                this.tagsList=[];
                this.currentTab="/";
                this.$router.push("/");
            };
        },
        // 点击删除tab页签事件监听
        removeTab(name){
            // console.log(name);
            // if(name === "/index") return;
            const index=this.tagsList.findIndex((item)=>{
                return item.path === name;
            });
            const removeTab=this.tagsList.splice(index,1)[0];
            const item=this.tagsList[index] ? this.tagsList[index] : this.tagsList[index-1];
            if(item){
                this.currentTab=item.path;
                removeTab.path === this.$route.fullPath && this.$router.push(item.path);
            }else{
                this.currentTab="/";
                this.$router.push("/");
            };
        },
        // 动态设置路由页签
        setRouteTags(route){
            this.currentTab=route.fullPath;
            // 判断当前点击这个菜单路由是否已存在路由数组集中
            const isExist=this.tagsList.some((item)=>{
                return item.path === route.fullPath;
            });
            // 不在则加入路由数组集中去
            !isExist && this.tagsList.push({
                path:route.fullPath,
                title:route.meta.title
            });
        }
    },
    created(){
        // 初始化将当前路由添加进路由数组集
        this.setRouteTags(this.$route);
    },
    deactivated(){
        this.tagsList=[];
    }
}
</script>
<style lang="less" scoped>
.qilin-tagsView{
    width:100%;
    .EDGQilinFlex(space-between,center);
    position:relative;
    >.tagsView{
        width:100%;
    }
    >.operate{
        position:absolute;
        // top:0.571rem;
        top:7px;
        right:0.571rem;
        font-size:@size-text-large;
        color:@color-text-title-checked;
        cursor:pointer;
    }
}
</style>
<style lang="less">
.qilin-popover{
    padding:0;
    .qilin-tagsView-operate-box{
        cursor:pointer;
        font-size:@size-text-default !important;
        >.qilin-tagsView-operate-box-list{
            border-bottom:1px solid @color-border;
            list-style-type: none;
            >.qiln-tagsView-operate-box-list-item{
                padding:@rem10;
                text-align:center;
                &:hover{
                    background-color:#f7f7f7;
                }
            }
        }
        >.qilin-tagsView-operate-all{
            text-align:center;
            &:nth-of-type(1){
                padding:@rem10 0 @rem5;
            }
            &:nth-of-type(2){
                padding:@rem5 0 @rem10;
            }
        }
    }
}
</style>